<template>
    <table class="m-table">
        <thead v-if="showHeader">
            <tr>
                <th class="first w1">
                    <div class="wp">&nbsp;</div>
                </th>
                <th>
                    <div class="wp af0"></div>
                </th>
                <th class="w2">
                    <div class="wp af1"></div>
                </th>
                <th class="w3">
                    <div class="wp af2"></div>
                </th>
                <th class="w4">
                    <div class="wp af3"></div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(song, index) in songList" :key="index" :class="{ even: index % 2 === 0 }">
                <td class="left">
                    <div class="hd">
                        <span class="num">{{ index + 1 }}</span>
                        <span v-if="!changeRklist" class="ply">&nbsp;</span>
                        <div v-else class="rk">
                            <span class="ico">1</span>
                        </div>
                    </div>
                </td>
                <td>
                    <div class="f-cb">
                        <div class="tt">
                            <a v-if="changeRklist" href="/song?id=2703980247">
                                <img class="rpic"
                                    src="http://p2.music.126.net/xf9LyD24-WqGcKQZGbQOaA==/109951170974994274.jpg?param=50y50&amp;quality=100">
                            </a>
                            <span v-if="changeRklist" class="ply">&nbsp;</span>
                            <div class="ttc">
                                <span class="txt">
                                    <a :href="`/song?id=${song.id}`">
                                        <b :title="song.name">
                                            {{ song.name }}
                                            <div class="soil">{{ song.soil }}</div>
                                        </b>
                                    </a>
                                </span>
                            </div>
                        </div>
                    </div>
                </td>
                <!-- 默认显示：时长、歌手、专辑 -->
                <template v-if="!changeStatistics">
                    <!-- 时长 + 操作栏 -->
                    <td class="s-fc3">
                        <span class="u-dur candel">{{ song.duration }}</span>
                        <div class="opt hshow">
                            <a class="icn-add" title="添加到播放列表"></a>
                            <span class="icn-fav" title="收藏"></span>
                            <span class="icn-share" title="分享">分享</span>
                            <span class="icn-dl" title="下载"></span>
                            <span class="icn-del" title="删除">删除</span>
                        </div>
                    </td>
                    <!-- 歌手 -->
                    <td>
                        <div class="text" :title="song.artist">
                            <span :title="song.artist">
                                <a :href="`/artist?id=${song.artistId}`">
                                    {{ song.artist }}
                                    <div class="soil">{{ song.artistSoil }}</div>
                                </a>
                            </span>
                        </div>
                    </td>
                    <!-- 专辑 -->
                    <td>
                        <div class="text">
                            <a :href="`/album?id=${song.albumId}`" :title="song.album">
                                {{ song.album }}
                                <div class="soil">{{ song.albumSoil }}</div>
                            </a>
                        </div>
                    </td>
                </template>
                <!-- 替代内容：合并三列 -->
                <template v-else>
                    <td colspan="3">
                        <div class="tops">
                            <span class="bg" style="width:100%;"></span>
                            <span class="times f-ff2">7次
                            </span>
                        </div>
                    </td>
                </template>
            </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
defineProps<{
    showHeader?: boolean
    changeStatistics?: boolean
    changeRklist?: boolean
    songList: Array<{
        id: number
        name: string
        nameHighlight?: string
        duration: string
        artist: string
        artistId: number
        artistHighlight?: string
        album: string
        albumId: number
        albumHighlight?: string
    }>
}>()
</script>

<style lang="scss" scoped>
// 总体表格样式
.m-table {
    width: 100%;
    border: 1px solid #d9d9d9;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;

    .even td {
        background-color: #f7f7f7;
    }

    .even:hover td {
        background: #e6e6e6;
    }

    .soil {
        position: absolute;
        text-indent: -9999em;
    }

    thead {
        display: table-header-group;
        vertical-align: middle;
        unicode-bidi: isolate;
        border-color: inherit;

        tr {
            display: table-row;
            vertical-align: inherit;
            unicode-bidi: isolate;
            border-color: inherit;

            th {
                height: 38px;
                background-color: #f7f7f7;
                background-position: 0 0;
                background-repeat: repeat-x;
                vertical-align: top;
                text-align: left;
                font-weight: normal;
                color: #666;
                background: url(../assets/MyMusic/table.png);

                .wp {
                    height: 38px;
                    line-height: 18px;
                    padding: 8px 10px;
                    background-position: 0 -56px !important;
                    background: url(../assets/MyMusic/table.png) no-repeat;
                }

                .af0:after {
                    content: '\6b4c \66f2 \6807 \9898';
                }

                .af1:after {
                    content: '\65f6 \957f';
                }

                .af2:after {
                    content: '\6b4c \624b';
                }

                .af3:after {
                    content: '\4e13 \8f91';
                }
            }

            .first {}

            .w1 {
                width: 74px;
            }

            .w2 {
                width: 125px;
            }

            .w3 {
                width: 14%;
            }

            .w4 {
                width: 20%;
            }
        }
    }

    tbody {
        display: table-row-group;
        vertical-align: middle;
        unicode-bidi: isolate;
        border-color: inherit;

        tr {
            display: table-row;
            vertical-align: inherit;
            unicode-bidi: isolate;
            border-color: inherit;

            &:hover {
                background: #e6e6e6;
            }

            .s-fc3 {
                color: #666;

                &:hover .hshow {
                    display: block;
                }

                &:hover .u-dur {
                    display: none;
                }

                .opt {
                    float: left;
                }

                .hshow {
                    display: none;

                    .icn-add {
                        float: left;
                        margin-top: 2px;
                        width: 13px;
                        height: 13px;
                        background-position: 0 -700px !important;
                        display: inline-block;
                        overflow: hidden;
                        vertical-align: middle;
                        background: url(../assets/Home/Recommend/icon.png) no-repeat;

                        &:hover {
                            background-position: -22px -700px !important;
                        }
                    }

                    .icn-fav {
                        float: left;
                        width: 18px;
                        height: 16px;
                        margin: 2px 0 0 4px;
                        overflow: hidden;
                        text-indent: -999px;
                        background-position: 0 -174px !important;
                        background: url(../assets/MyMusic/table.png) no-repeat;
                        cursor: pointer;

                        &:hover {
                            background-position: -20px -174px !important;
                        }
                    }

                    .icn-share {
                        background-position: 0 -195px !important;
                        float: left;
                        width: 18px;
                        height: 16px;
                        margin: 2px 0 0 4px;
                        overflow: hidden;
                        text-indent: -999px;
                        background: url(../assets/MyMusic/table.png) no-repeat;
                        cursor: pointer;

                        &:hover {
                            background-position: -20px -195px !important;
                        }
                    }

                    .icn-dl {
                        background-position: -81px -174px !important;
                        float: left;
                        width: 18px;
                        height: 16px;
                        margin: 2px 0 0 4px;
                        overflow: hidden;
                        text-indent: -999px;
                        background: url(../assets/MyMusic/table.png) no-repeat;
                        cursor: pointer;

                        &:hover {
                            background-position: -104px -174px !important;
                        }
                    }

                    .icn-del {
                        background-position: 0 -217px !important;
                        float: left;
                        width: 18px;
                        height: 16px;
                        margin: 2px 0 0 4px;
                        overflow: hidden;
                        text-indent: -999px;
                        background: url(../assets/MyMusic/table.png) no-repeat;
                        cursor: pointer;

                        &:hover {
                            background-position: -20px -217px !important;
                        }
                    }
                }
            }

            td {
                background-color: #f7f7f7;
                padding: 6px 10px;
                line-height: 18px;
                text-align: left;
                background: url(../assets/MyMusic/table.png) no-repeat 0 9999px;

                .hd {
                    height: 18px;

                    .ply {
                        float: right;
                        width: 17px;
                        height: 17px;
                        cursor: pointer;
                        background-position: 0 -103px !important;
                        background: url(../assets/MyMusic/table.png) no-repeat;

                        &:hover {
                            background-position: 0 -128px !important;
                        }
                    }

                    .num {
                        margin-left: 5px;
                        color: #999;
                    }

                    .rk {
                        float: right;
                        width: 32px;
                        margin-right: -5px;
                        text-align: center;

                        .ico {
                            padding-left: 8px;
                            line-height: 17px;
                            font-size: 10px;
                            font-family: Arial, Helvetica, sans-serif;
                            display: inline-block;
                            overflow: hidden;
                            vertical-align: middle;
                            color: #bb2128;
                            background-position: -74px -299px !important;
                            background: url(../assets/Home/Recommend/icon.png) no-repeat;
                        }
                    }
                }

                .f-cb:after {
                    clear: both;
                    content: '.';
                    display: block;
                    height: 0;
                    visibility: hidden;
                }

                .tt {
                    float: left;
                    width: 100%;
                    display: flex;
                    align-items: center;

                    .rpic {
                        float: left;
                        width: 50px;
                        height: 50px;
                        margin-right: 14px;
                    }

                    .ply {
                        float: right;
                        width: 17px;
                        height: 17px;
                        cursor: pointer;
                        margin-right: 14px;
                        background-position: 0 -103px !important;
                        background: url(../assets/MyMusic/table.png) no-repeat;

                        &:hover {
                            background-position: 0 -128px !important;
                        }
                    }

                    .ttc {
                        height: 18px;
                        margin-right: 20px;

                        .txt {
                            position: relative;
                            display: inline-block;
                            padding-right: 25px;
                            margin-right: -25px;
                            max-width: 99%;
                            height: 20px;
                            border: 0;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;

                            a {
                                text-decoration: none;
                                color: #333;
                            }

                            b {
                                font-weight: normal;
                            }
                        }
                    }
                }
            }

            .text {
                width: 100%;
                position: relative;
                zoom: 1;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;

                a {
                    white-space: nowrap;
                }
            }
        }
    }
}

// 另一部分内容
.tops {
    float: right;
    position: relative;
    z-index: 1;
    zoom: 1;
    width: 319px;
    height: 38px;
    line-height: 38px;

    .bg {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 38px;
        background-color: #4eb4f5;
        opacity: 0.1;
    }

    .times {
        position: absolute;
        left: 10px;
        z-index: 1;
        height: 38px;
        line-height: 38px;
        color: #666;
    }

    .f-ff2 {
        font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
    }
}
</style>
